<template>
	<view class="wrapper">
		<!-- 商品图片 -->
		    <swiper
			  v-if="goods.pics"
		      class="pics"
		      indicator-dots
		      indicator-color="rgba(255, 255, 255, 0.6)"
		      indicator-active-color="#fff"
		    >
		      <swiper-item v-for="item in goods.pics" :key="item.pics_id">
		        <image class="pics" :src="item.pics_mid" />
		      </swiper-item>
		    </swiper>
		<!-- 基本信息 -->
		    <view class="meta">
		      <view class="price">￥{{goods.goods_price}}</view>
		      <view class="name">{{goods.goods_name}}</view>
		      <view class="shipment">快递: 免运费</view>
		      <text class="collect icon-star">收藏</text>
		    </view>
		
		<!-- 商品详情 -->
		    <view class="detail">
		      <view v-html="goods.goods_introduce"></view>
		      <!-- <rich-text :nodes="goods.goods_introduce"></rich-text> -->
		    </view>
				<!-- 操作 -->
				<view class="action">
				  <button open-type="contact" class="icon-handset">联系客服</button>
				  <text class="cart icon-cart" @tap="gotoCart">购物车</text>
					<text class="cart-count">{{goodsCount}}</text>
				  <text class="add" @tap="addCart">加入购物车</text>
				  <text class="buy" >立即购买</text>
				</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				goods: null
			}
		},
		computed:{
			...mapGetters(['carts','goodsCount'])
		},
		onLoad({id}) {
			this.getGoods(id)
		},
		// methods
		methods: {
			
			gotoCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			addCart () {
			  // 判断是否添加过
			  // let good = this.carts.find(item => item.goods_id === this.goods.goods_id)
			
			  // 没有=》新增
			  // if (!good) {
			    const {
			      goods_id,
			      goods_name,
			      goods_price,
			      goods_small_logo
			    } = this.goods
			    // 没有， 加入新的
			    // this.carts.push({
			    //   goods_id,
			    //   goods_name,
			    //   goods_price,
			    //   goods_small_logo,
			      
			    //   goods_count: 1,       // 数据为1
			    //   goods_checked: true   // 默认选中
			    // })
			
					this.$store.commit('cart/add', {
			      goods_id,
			      goods_name,
			      goods_price,
			      goods_small_logo,
			      
			      goods_count: 1,       // 数据为1
			      goods_checked: true   // 默认选中
			    })
			  // } else {
			  //   // 有, 直接 数量加一
			  //   good.goods_count++
			  // }
			
			  // 存储本地
			  // uni.setStorageSync("carts", this.carts)
			  uni.showToast({
			    title: '加入成功',
			    duration: 2000
			  })
			},
			async getGoods(goods_id) {
				const { data } = await this.$request({
					url: "goods/detail",
					data: { goods_id }
				});
		
				this.goods = data;
			},			
		}
	}
</script>

<style scoped lang="scss">
.wrapper {
  margin-bottom: 100rpx;
  background-color: #f4f4f4;
}

.pics,  {
	width: 750rpx;
  height: 640rpx;
}

.meta {
  height: 250rpx;
  line-height: 1;
  padding: 30rpx 180rpx 30rpx 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;

  .price {
    font-size: 36rpx;
    color: #ea4451;
    margin-bottom: 20rpx;
  }

  .name {
    color: #333;
    line-height: 1.4;
    font-size: 33rpx;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .shipment {
    font-size: 27rpx;
    color: #999;
    position: absolute;
    bottom: 30rpx;
  }

  .collect {
    width: 140rpx;
    height: 88rpx;
    text-align: center;
    box-sizing: border-box;
    border-left: 1rpx solid #ddd;
    font-size: 24rpx;
    color: #999;

    position: absolute;
    right: 10rpx;
    top: 91rpx;
  }

  [class*="icon-"]::before {
    display: block;
    font-size: 45rpx;
    margin-bottom: 10rpx;
  }
}

.detail image {
  width: 100%;
  height: 480rpx;
  margin-top: 20rpx;
}

.action {
  width: 100%;
  height: 98rpx;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  align-items: center;

  text {
    display: block;
  }

  .add,
  .buy {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 210rpx;
    text-align: center;
    font-size: 27rpx;
    color: #fff;
  }

  .add {
    background-color: #f4b73f;
  }

  .buy {
    background-color: #ea4451;
  }

  button {
    padding: 0;
    border-radius: 0;
    background-color: #fff;

    &::after {
      border: none;
    }
  }

  button,
  .cart {
    flex: 1;
    text-align: center;
    color: #989898;
    font-size: 24rpx;
    box-sizing: border-box;
  }

  [class*="icon"]::before {
    display: block;
    font-size: 45rpx;
    margin-bottom: 2rpx;
  }
}

.cart-count {
      position: absolute;
      top: -16rpx;
      left: 252rpx;
      font-size: 28rpx;
      background-color: #ea4451;
      color: #fff;
      width: 50rpx;
      height: 50rpx;
      border-radius: 50rpx;
      line-height: 50rpx;
      text-align: center;
    }
</style>
